<template>
<!--  查看日志  -->
  <el-dialog class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
    <div class="monitoring">
      <div class="container-box">
        <div class="screen-container">
          <span class="font-title">关键字：</span>
          <!-- 搜索框 -->
          <el-input
            v-model="input_value"
            size="small"
            placeholder="请输入日志内容"
            style="width: 260px; margin-right: 24px"
            class="seach-input"
          ></el-input>
          <!-- 按钮 -->
          <el-button type="primary" size="small">查询</el-button>
        </div>
        <div class="page-container">
          <LeftContainer :tree="tree" @emitSel="getSel"></LeftContainer>
          <right-container :checkList="checkList" @emitClick="dialogVisible = true"></right-container>
          <!-- 提示框 -->
        </div>

      </div>
    </div>
  </el-dialog>
</template>

<script>
import LeftContainer from '@/components/trees/LeftContainer.vue'
import RightContainer from '@/components/trees/RightContainer.vue'

export default {
  components: { LeftContainer, RightContainer },
  props:{
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
  },
  data() {
    return {
      isOpen:false,
      //   搜索框的值
      input_value: '',
      //   子组件传输的值
      checkList: [],
      //   树形结构的值
      tree: [
        {
          showchild: true,
          title: '操作类型',
          name: 'sj',
          id: 1,
          child: [
            {
              title: '新增',
              num: 1,
              id: 1
            },
            {
              title: '编辑',
              num: 10,
              id: 2
            },
            {
              title: '删除',
              num: 1,
              id: 3
            },
            {
              title: '开启',
              num: 1,
              id: 4
            },
            {
              title: '停止',
              num: 1,
              id: 5
            }
          ]
        },
        {
          showchild: true,
          title: '日志类型',
          name: 'jb',
          id: 2,
          child: [
            {
              title: '操作日志',
              num: 1,
              id: 1
            },
          ]
        }
      ]
    }
  },
  methods: {
    // 获取子组件传参
    getSel(data) {
      this.checkList = data
    }

  }
}
</script>

<style lang="scss" scoped>
.screen-container{
  padding:10px;
}
::v-deep .el-dialog__body{padding:0 !important;}
.monitoring {
}
.page-container{
  display:flex;
  align-items: stretch;
  .left-container{
    height:auto;
  }
}
</style>
